import { FC, useCallback, useRef } from 'react';
import { getList, add, update, del } from './api';
import useColumns from './useColumns';
import useAddSchema from './useAddSchema';
import useSchema from './useSchema';
import QueryTable from '@/components/query-table';
import { ProTableColumns, ProTableRefProps } from '@ebonex/ebonex-ui/lib/pro-table/typing';
import { ModalForm } from '@ebonex/ebonex-ui';
import ButtonConfirm from '@/components/buttonConfirm';
import useTreeMenu from '@/hooks/useTreeMenu/index';

const Role: FC<any> = () => {
  const tableRef = useRef<ProTableRefProps>();
  const columns = useColumns();
  const [menus] = useTreeMenu();

  const addSchema = useAddSchema({ menus: menus || [] });
  const schema = useSchema();

  const reload = useCallback(() => {
    tableRef?.current?.reload();
  }, []);
  return (
    <>
      <QueryTable
        addRequest={add}
        schema={schema}
        addSchema={addSchema}
        proTableRef={tableRef}
        request={getList}
        operators={(value, record, index) => [
          <ButtonConfirm
            buttonText="删除"
            type="link"
            danger
            onSuccess={reload}
            request={() => del(record?.id)}
          />,
          <ModalForm
            request={update}
            buttonType="link"
            formProps={{
              labelCol: {
                span: 5,
              },
            }}
            onSuccess={reload}
            initialValue={record}
            schema={addSchema}
            buttonText="修改"
          />,
        ]}
        toolBarRender={[
          <ModalForm
            buttonText="新增"
            request={add}
            formProps={{
              labelCol: {
                span: 5,
              },
            }}
            onSuccess={reload}
            schema={addSchema}
          />,
        ]}
        columns={columns as ProTableColumns[]}
      />
    </>
  );
};
export default Role;
